<template>
  <div class="hotsAdd">
    <el-page-header title="新闻管理" content="新闻修改" @back="handleBack()" />

    <el-form
      ref="hotsFormRef"
      style="max-width: 600px"
      :model="hotsForm"
      status-icon
      :rules="hotsFormRules"
      label-width="auto"
      class="demo-ruleForm"
    >
      <el-form-item label="标题" prop="title">
        <el-input v-model="hotsForm.title" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <Editor
          @even="handleChangeContent"
          :content="hotsForm.content"
          v-if="hotsForm.content"
        />
      </el-form-item>
      <el-form-item label="类别" prop="category">
        <el-select v-model="hotsForm.category" placeholder="请选择类别">
          <el-option
            v-for="item in options"
            :key="item"
            :label="item.lable"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="封面" prop="cover">
        <Upload :avatar="hotsForm.cover" @zxychange="handleAvatar" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitUpdateHot">
          提交编辑
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
import { ref, reactive, onMounted } from "vue";
import Editor from "@/components/editor/Editor.vue";
import Upload from "@/components/upload/Upload.vue";
import upload from "@/util/upload";
import { ElMessage } from "element-plus";
import request from "@/util/request";

const hotsFormRef = ref();

const hotsForm = reactive({
  title: "",
  content: "",
  category: 1, //1最新动态  2典型案例  3通知公告
  cover: "",
  file: null,
  isPublish: 0,
});
// 类别
const options = [
  { lable: "最新动态", value: 1 },
  { lable: "典型案例", value: 2 },
  { lable: "通知公告", value: 3 },
];
// 热门新闻表单规则
const hotsFormRules = reactive({
  title: [{ required: true, message: "请输入标题", trigger: "blur" }],
  content: [{ required: true, message: "请输入内容", trigger: "blur" }],
  category: [{ required: true, message: "请选择类别", trigger: "blur" }],
  cover: [{ required: true, message: "请选择封面", trigger: "blur" }],
});

// editor内容改变时触发
const handleChangeContent = (data) => {
  hotsForm.content = data;
};
// 封面图片改变时触发
const handleAvatar = (file) => {
  // console.log(file);  file.raw代表图片的原生对象
  hotsForm.cover = URL.createObjectURL(file);
  hotsForm.file = file; //把头像的原生对象添加到提交表单数据中
};

// 获取当前的编辑新闻,进行数据回填
onMounted(async () => {
  let res = await request.get(`/adminapi/hots/hotsList/${route.params.id}`);
  // 因为hotsForm值是reactive,不能直接复制,使用Object.assign
  Object.assign(hotsForm, res.data.data[0]);
  // await getTableData();
});

// 修改新闻
const submitUpdateHot = () => {
  hotsFormRef.value.validate(async (valid) => {
    if (valid) {
      // 提交数据给后端
      let res = await upload("/adminapi/hots/updateHot", hotsForm);

      if (res.data.ActionType === "OK") {
        ElMessage.success("修改新闻成功!");
        // 添加成功,跳转到用户列表页
        router.push("/hots-manage/hotsList");
      }
    }
  });
};
//   返回上一页面
const handleBack = () => {
  router.back();
};
</script>

<style scoped lang="scss">
.hotsAdd {
  width: 100%;
  height: 100vh;
  .el-form {
    max-width: 1200px !important;
    margin-top: 30px !important;
  }
}

::v-deep .avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

::v-deep .avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

::v-deep .avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.avatar {
  width: 178px;
  height: 178px;
}

::v-deep .el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
